<template>
	<div class="container">
	
	<div>
	<div>
		 <el-form :inline="true" class="demo-form-inline">
		    <el-form-item>
		      <el-input placeholder="课程名称" v-model="dataset.courseName" />
		    </el-form-item>
		  
		    <el-form-item>
		      <el-button type="primary" class="inquire" @click="AllPrivateAll" :icon="Search">查询</el-button>
              <router-link to="/NewPrivateEducation?compile=1"><el-button type="primary" class="inquire" plain>添加私教课程</el-button></router-link>
		
		    </el-form-item>
		  </el-form>
	</div>
	
  <el-table :data="AllPrivate" border style="width: 100%">
    <el-table-column label="课程图片" width="180">
		<template #default="s">
        <el-image :src="s.row.pic" style="width: 80px; height: 80px" />
       </template>
	</el-table-column>
    <el-table-column prop="name" label="课程名称" width="250" />
    <el-table-column prop="coachName" label="教练" width="250" />
	<el-table-column prop="sort" label="排序" width="200" />
	<el-table-column prop="time" label="时长" width="250" />
	<el-table-column prop="underNumber" label="可预约人数" width="220" />
	<el-table-column label="操作" width="300">
        <template #default="s">
			  <router-link :to="'/NewPrivateEducation?compile=2&id='+s.row.id"> <el-button class="operation" type="primary" :icon="Edit" :data-id="s.row.id">编辑</el-button>
			</router-link>
			  <!-- <router-link to="/ScheduleView"><el-button class="operation" type="primary">排期</el-button></router-link> -->
			  <el-button type="danger" :icon="Delete" :data-id="s.row.id" @click="PersonalDel($event)">删除 </el-button>
	      </template>
	    </el-table-column>
  </el-table>
  
  </div>
  <!-- <div class="fenye">
              <el-pagination class="fenye" background layout="prev, pager, next" :total="100" :page-size="5">
              </el-pagination>
          </div> -->
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive} from "vue"
import { Edit,Delete,Search } from '@element-plus/icons-vue';//icon图标
import {PersonalHooks,IPerson} from "../hooks/PersonalHooks"//引入hooks
import { GroupHooks,Groups } from '../hooks/GroupHooks';
const _GroupHooks: Groups = GroupHooks()
const _PersonalHooks:IPerson=PersonalHooks()//

let AllPrivate = ref<Array<any>>([]);
//私教数据
const dataset=reactive({
	coachId:0,
	courseName:'',
	limit:20,
	page:1,
})

_PersonalHooks.AllPrivate(dataset.coachId,dataset.courseName,dataset.limit,dataset.page,AllPrivateAll);
function AllPrivateAll(data:any){
	AllPrivate.value =data;
}
// 私教删除
function PersonalDel(e:any){
	let id = e.currentTarget.dataset.id;
	_PersonalHooks.PersonalDel(dataset.coachId,dataset.courseName,dataset.limit,dataset.page,id,AllPrivateAll)
}


      //教练接口
	  _GroupHooks.getCoachList(coachData)
const coachList=ref<Array<any>>([])
function coachData(data:any){
   coachList.value=data
 }

</script>
<style type="text/css" scoped>
	
	.tab{
		margin-bottom: 20px;
	}
	>>>th div{
		text-align: center;
	}
	>>>td div{
		text-align: center;
	}
	.fenye{
       margin-top: 10px;
        display: flex;
        justify-content: flex-end;
	}
	.tk{
		   width: 150px;
		   height: 40px;
		   margin: 20px 10px 20px 20px;

	}
	.inquire{
		width: 100px;
		height: 35px;
		margin: 0 5px;
	}
    .operation{
		margin-right:5px ;
	}
</style>